import { ProLayout } from "@ant-design/pro-components";
import { Link, Outlet, useLocation } from "react-router-dom";
import { routerArray } from "../routes";
import { getMenusData, InitialSettings } from "./utils";
import styles from "./index.module.less";
import { MAIN_PRIMARY_COLOR, MAIN_PRIMARY_COLOR_OPACITY_35 } from "../enums";
import Header from "./Header";

import { MENU_DATA } from "./menuData";

const BaseLayout = () => {
	const location = useLocation();
	const menusData = getMenusData(routerArray);

	return (
		<div className={styles.container}>
			{/*@ts-ignore*/}
			<ProLayout
				{...InitialSettings}
				token={{
					sider: {
						colorMenuBackground: "#fff",
						colorTextMenuSelected: MAIN_PRIMARY_COLOR,
						colorBgMenuItemSelected: MAIN_PRIMARY_COLOR_OPACITY_35,
						colorBgMenuItemCollapsedSelected: MAIN_PRIMARY_COLOR_OPACITY_35
					},
					header: {
						heightLayoutHeader: 70
					}
				}}
				siderWidth={180}
				headerRender={() => <Header />}
				// headerContentRender={() => <div>324234234</div>}
				location={location}
				menuItemRender={(item: any, dom) => {
					return (
						<Link to={item?.path} key={item?.id} className={styles.link_wrap}>
							{Boolean(item.icon) && (
								<img
									src={`/icon/${item.icon}${item.path === location.pathname ? "_active" : ""}.png`}
									style={{ marginRight: "9px" }}
									width={item.icon === "jiaoyi" || item.icon === "setting" ? 18 : 16}
								/>
							)}
							<span style={{ marginTop: item.icon === "home" || item.icon === "jiaoyi" ? "2px" : "0px" }}>{item.name}</span>
						</Link>
					);
				}}
				subMenuItemRender={(item: any) => {
					return (
						<div key={item?.id} className={styles.link_wrap}>
							{Boolean(item.icon) && (
								<img
									src={`/icon/${item.icon}${location.pathname?.indexOf(item.pathName) > -1 ? "_active" : ""}.png`}
									style={{ marginRight: "9px" }}
									width={item.icon === "jiaoyi" || item.icon === "setting" ? 18 : 16}
								/>
							)}
							<span style={{ marginTop: item.icon === "home" ? "2px" : "0px" }}>{item.name}</span>
						</div>
					);
				}}
				collapsedButtonRender={false}
				menuDataRender={() => MENU_DATA}
			>
				<Outlet />
			</ProLayout>
		</div>
	);
};
export default BaseLayout;
